<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Directory</title>
<link href="<c:url value="/resources/css/bootstrap.min.css" />"
	rel="stylesheet">
<link href="<c:url value="/resources/css/dataTables.bootstrap.css" />"
	rel="stylesheet">
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/bootstrap.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/scripts.js"/>"></script>
<script src="<c:url value="/resources/js/bootbox.js" />"></script>
<script type="text/javascript" 
	src="<c:url value="/resources/js/jquery-1.11.1.min.js"/>"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css"
	href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/ui-lightness/jquery-ui.min.css" />
<script type="text/javascript" 
	src="<c:url value="/resources/js/jquery.dataTables.min.js"/>"></script>
<script type="text/javascript" 
	src="<c:url value="/resources/js/dataTables.bootstrap.js"/>"></script>
<script type="text/javascript"
	src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript"
	src="/MockProject_J2/resources/js/lookupscripts.js"></script>	





<script type='text/javascript'>
$(document).ready(
	    function() {
$("form").validate (
		{
			rules : {
				directorateName : {
					minlength : 5,
					maxlength : 100,
					required : true
				},
				addressLine1 : {
					required : true
				},
				inputBusiness : {
					required : true
				},
				inputPhone : {
					minlength : 10,
					maxlength : 11,
					required : true,
					number : true
				},
				inputWebAddress : {
					minlength : 10,
					url : true,
				},

			},
			highlight : function(element) {
				$(element).closest('.form-group')
						.removeClass('has-success')
						.addClass('has-error');
			},
			unhighlight : function(element) {
				$(element).closest('.form-group')
						.removeClass('has-error')
						.addClass('has-success');
			}
		});
	    });
function copyAddress() {
	if (document.getElementById("chbCopyAddress").checked != true) {
		document.getElementById("addressLine1").value = "";
		document.getElementById("addressLine2").value = "";
		document.getElementById("addressLine3").value = "";
	} else {
		document.getElementById("addressLine1").value = "${organisation.addressLine1}";
		document.getElementById("addressLine2").value = "${organisation.addressLine2}";
		document.getElementById("addressLine3").value = "${organisation.addressLine3}";
	}
}
function Submit() {
	if (document.URL.indexOf("amendDirectorate") != -1) {
		document.getElementById("form").action = "amendDirectorate";
	}
	document.getElementById("form").submit();
}

function CheckAddOrAmend() {
		if (document.URL.indexOf("amendDirectorate") == -1) {
			document.getElementById("hidden").style.display = "none";
		} 
}	

function checkIncludeActive() {
	if (document.getElementById("includeinactive").checked != true) {
		var table = $('#departmentTable').DataTable();
		table.column(4).search("Yes").draw();
	} else {
		var table = $('#departmentTable').DataTable();
		table.column(4).search("").draw();
	}
}

function activeDepartment(departId,isActive) {
	var isActive = document.getElementById('depart'+departId).getElementsByTagName("td")[4].childNodes[0].nodeValue;
    if(isActive.indexOf('No')!=-1){
    	bootbox.confirm("Do you want to make this department active?", function(result) {  
    		if(result == true){
        		$.ajax(
        		{
        			url:"activedepartment?departId=" + departId,
        			type:"GET",
        			success:function(){}      			
        		});
        		document.getElementById('depart'+departId).getElementsByTagName("td")[4].childNodes[0].nodeValue = "Yes";
        	//	var table = $('#departmentTable').DataTable();
        	//	table.cell(table.row(document.getElementById('depart'+departId).index(),4)).data('Yes').draw();
        	} else {        		
        		
        	}
    	}); 
    }
}
	
</script>
<script type="text/javascript">
$(document).ready(function() {
	var table = $('#departmentTable').DataTable();
	table.columns(4).search('Yes').draw();
	$('#departmentTable tbody').on('click', 'tr', function() {
		if ($(this).hasClass('active')) {
			$(this).removeClass('active');
		} else {
			table.$('tr.active').removeClass('active');
			$(this).addClass('active');
		}
	});
	$("#departmentTable tr td").css('cursor', 'pointer');

});

</script>

</head>
<style>
body {
	font-size: 140%;
	padding-top: 70px;
}

.myDialog {
	width: 120px;
	height: 40px;
	position
	({
	my
	:
	"center"
	+
	"center"
	,
	at:"center"+"center"
	,
	of: window
}
),
}

#actionSupp {
    margin-right: 10px;
    float: right;
}
</style>
<body onload="CheckAddOrAmend()">
	<%@ include file="header.jsp"%>
	<div class="container">
		<h2>Directorate Details</h2>
		<hr>

		<div class="tabbable">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#tab1" data-toggle="tab">Details</a></li>
				<li id="hidden">
				<a href="#tab2" data-toggle="tab">Department</a>
			</li>

			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="tab1">
					<form:form action="addDirectorate" id="form" method="post"
						commandName="directorate" class="form-horizontal">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<p></p>
								<div class="form-group">
									<label class="col-lg-4 control-label">BU/Directorate
										Name *</label>
									<div class="col-lg-6">
										<form:input path="directorateName" id="directorateName"
											name="directorateName" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">BU/Directorate
										Short Description *</label>
									<div class="col-lg-6">
										<form:textarea path="descriptionShort" class="form-control " />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Lead Contact</label>
									<div class="col-lg-4">
										<form:input path="contact.firstName" id="inputContactName"
											class="form-control" readonly="true" />
									</div>
									<a class="btn btn-primary btn-default" id="lookupcontact">
										<span class="glyphicon glyphicon-search"></span> Lookup
									</a>
								</div>
								<div class="form-group">
									<div class="col-lg-6">
										<input type="checkbox" name="chbCopyAddress"
											id="chbCopyAddress" onclick="copyAddress();" /> &nbsp; Copy
										Address form Organisation
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Address Line 1 *</label>
									<div class="col-lg-6">
										<form:input path="addressLine1" type="text"
											class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Address Line 2</label>
									<div class="col-lg-6">
										<form:input path="addressLine2" type="text"
											class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Address Line 3</label>
									<div class="col-lg-6">
										<form:input path="addressLine3" type="text"
											class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">PostCode *</label>
									<div class="col-lg-4">
										<form:input path="address.postCode" class="form-control"
											id="inputPostCode" readonly="true" />
									</div>

									<a class="btn btn-primary btn-default" id="lookupadress"> <span
										class="glyphicon glyphicon-search"></span> Lookup
									</a>

								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">City/Town</label>
									<div class="col-lg-6">
										<form:input path="address.town.townName" class="form-control"
											id="inputTown" readonly="true" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">County</label>
									<div class="col-lg-6">
										<form:input path="address.county.countyName"
											class="form-control" id="inputCounty" readonly="true" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">National/Country</label>
									<div class="col-lg-6">
										<form:input path="address.country.countryName"
											class="form-control" id="inputCountry" readonly="true" />
									</div>
								</div>
							</div>
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
							<p></p>
								<div class="form-group">
									<label class="col-lg-4 control-label">Type of Business
										*</label>
									<div class="col-lg-4">
										<input type="text" value="${typeOfBussines}"
											id="inputBusiness" name="inputBusiness" class="form-control"
											readonly="true" />
									</div>

									<a class="btn btn-primary btn-default" id="lookupsic"> <span
										class="glyphicon glyphicon-search"></span> Lookup
									</a>


								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">SIC Code</label>
									<div class="col-lg-4">
										<form:input path="sicCode" id="inputSICCode" class="form-control" readonly="true" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">BU/Directorate
										Full Description </label>
									<div class="col-lg-6">
										<form:textarea path="descriptionFull" class="form-control " />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Phone Number *</label>
									<div class="col-lg-6">
										<form:input path="phoneNumber" class="form-control"
											id="inputPhone" name="inputPhone" placeholder="0987654321" maxlength="10" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Fax</label>
									<div class="col-lg-6">
										<form:input path="fax" class="form-control" id=""
											placeholder="" maxlength="10"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Email</label>
									<div class="col-lg-6">
										<form:input path="email" class="form-control" id=""
											placeholder="fsoft@gmail.com" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">WebAddress</label>
									<div class="col-lg-6">
										<form:input path="webAddress" class="form-control bfh-phone"
											name="inputWebAddress" id="inputWebAddress"
											placeholder="" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Charity Number</label>
									<div class="col-lg-6">
										<form:input path="charityNumber" class="form-control"
											id="inputcharityNumber" maxlength="5" placeholder="" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Company Number</label>
									<div class="col-lg-6">
										<form:input path="companyNumber" class="form-control"
											id="inputcompanyNumber" maxlength="5" placeholder="" />
									</div>
								</div>
								<div class="form-group">
									<div class="col-lg-6">
										<form:input path="address.addressID" id="inputaddressID"
											type="hidden" />
										<form:input path="organisation.orgID" type="hidden" />
										<form:input path="directorateID" type="hidden" />
										<form:input path="isActive" type="hidden" />
										<form:input path="contact.contactID" id="inputcontactID"
											type="hidden" />
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-2 col-md-offset-5">
								<button onclick="Submit();" class="btn btn-success btn-default">Save</button>
								<button class="btn btn-danger btn-default"
									onClick="location.href='orgDetail?orgId=${organisation.orgID}'">Back
								</button>
							</div>
						</div>
					</form:form>
				</div>
				
				
				<div class="tab-pane" id="tab2">
				<div class="col-md-12 column">
					<div class="row clearfix">
						<div class="col-md-6 column">
								<h3></h3>
							</div>
						<div class="col-md-6 column">
							<div id="actionSupp" style="margin-top: 20px;">
								<input value="Create" type="button" class="btn btn-primary btn-default" 
								onclick="location.href='adddepartment?direcId=${directorate.directorateID}';"/>
								<input id="includeinactive" onclick="checkIncludeActive()" type="checkbox" />Include In-active
							</div>
						</div>
					</div>
				</div>
					<hr>
					<table id="departmentTable" class="table table-striped table-bordered"
						cellspacing="0" width="100%">
						<thead>
							<tr>
								<th>Department Name</th>
								<th>Address Line 1</th>
								<th>Postcode</th>
								<th>Contact</th>
								<th>Is Active ?</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach var="depart" items="${listDepartment}">
								<tr id="depart${depart.departmentID}"
									onclick="activeDepartment('${depart.departmentID}','${depart.isActive}');">

									<td class="url">
									<a href="adddepartment?departId=${depart.departmentID}">${depart.departmentName}</a></td>
									<td>${depart.addressLine1}</td>
									<td>${depart.address.postCode}</td>
									<td>${depart.contact.firstName}</td>
									<td><c:choose>
											<c:when test="${depart.isActive}">Yes</c:when>
											<c:otherwise>No</c:otherwise>
										</c:choose></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="footer.jsp"%>
	<div id="modaladdress" style="display: none;"></div>
	<div id="modalcontact" style="display: none;"></div>
	<div id="modalsic" style="display: none;"></div>
	
</body>
</html>